<template>
  <div style="margin-left: 200px; margin-right: 100px">
    <!-- 导航 -->
    <el-container style="height: 300px; background-image:linear-gradient(to right, #ff6701, #ff9501)">
      <el-aside width="220px" style="display: flex; align-items: center;">
        <div style="width: 170px; height: 170px; background-color: white; border-radius: 30px;margin-left:40px">
          <img style="width: 80%;margin-top:10px" :src="university.logo" />
        </div>
      </el-aside>
      <el-main>
        <div style="font-size:25px" >{{university.name}}</div>
        <i class="el-icon-location-information" style="color:#fb9e18;margin-right:7px;"/>{{university.province}}{{university.city}}
        <svg-icon icon-class="hot" style="margin-left:50px;margin-right:7px"/>热度:{{university.hot}}<br>
        <span class="schooltags">{{university.type===1?"普通本科":"专科"}}</span>
        <span class="schooltags">{{university.category}}类</span>
         <span class="schooltags" v-for="tag in university.tags.split(';')" :key="tag">{{tag}}</span><br>
        <span style="margin-right:7px" >官网地址:</span><a target="_blank"  :href="university.website">{{university.website}}</a><br>
        <span style="margin-right:7px" >招生电话:</span>{{university.phone}}<br>
        <span style="margin-right:7px" >官网邮箱:</span>{{university.email}}<br>
      </el-main>
    </el-container>
     <el-footer>
       <el-row>
        <el-col :span="1"><div class="grid-content left-title "></div></el-col>
        <el-col :span="23"><div class="grid-content bg-purple-light">基本信息</div></el-col>
        </el-row>
        <el-row :gutter="20">
         <el-col :span="6">
            <div  class=" bg-purple">
                <el-card class="basic-info-card">国家重点学科<br>
                   <svg-icon style="width:70px;height:70px" icon-class="重点学科"></svg-icon>
                    <br>{{university.keyDisciplines}}个
                </el-card>
            </div>
        </el-col>
         <el-col :span="6"><div class="  bg-purple">
           <el-card class="basic-info-card">博士点<br>
              <svg-icon style="width:70px;height:70px" icon-class="博士生"></svg-icon>
              <br>{{university.doctoralPrograms}}个
           </el-card>
          </div></el-col>
         <el-col :span="6"><div class="grid-content bg-purple">
           <el-card class="basic-info-card">硕士点<br>
              <svg-icon style="width:70px;height:70px" icon-class="硕士点"></svg-icon>
              <br>{{university.masterPrograms}}个
           </el-card>
          </div></el-col>
         <el-col :span="6"><div class=" bg-purple">
           <el-card class="basic-info-card">科研项目<br>
              <svg-icon style="width:70px;height:70px" icon-class="研究"></svg-icon>
              <br>{{university.projectsCount}}个
           </el-card>
          </div></el-col>
        </el-row>
        <el-row>
        <el-col :span="11" style="height:400px;margin-top:40px"><div >
          <img style="height:300px;border-radius: 15px;" :src="JSON.parse(this.university.images)[1]">
          </div></el-col>
        <el-col :span="13"><div style="line-height:25px;margin-top:20px">{{university.description}}</div></el-col>
</el-row>

<!-- 招生计划 -->
        <el-row>
        <el-col :span="1"><div class="grid-content left-title "></div></el-col>
        <el-col :span="23"><div class="grid-content bg-purple-light">招生计划
          <label style="font-weight: normal;font-size:17px;margin-left:200px;margin-right:10px">年份:</label>
        <el-select v-model="year"  placeholder="请选择"  style="width:100px;"   @change="handleYearChange">
    <el-option
  
      v-for="item in years"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <label style="font-weight: normal;font-size:17px;margin-left:100px;margin-right:10px">类型:</label>
        <el-select v-model="type"  placeholder="请选择" @change="handleTypeChange"  style="margin-top:0px;width:100px">
    <el-option
      v-for="item in examType"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
          </div></el-col>
        </el-row>
        <!-- 招生计划表格区域 -->
        <el-card style="margin-top:30px;width:60%;margin-bottom:20px" >
          <el-table 
      :data="admissionPlan"
      stripe border
      style="width: 100%;text-align:center">
      <el-table-column
        prop="majorName"
        label="专业名称"
        width="270">
      </el-table-column>
      <el-table-column
        prop="planSize"
        label="计划招生"
        width="120">
      </el-table-column>
      <el-table-column
        prop="studyPeriod"
        label="学制"
         width="120"
        >
      </el-table-column>
      <el-table-column
        prop="feeAmount"
        label="学费"
         width="120">
      </el-table-column>
          </el-table>
    
        </el-card>
          <el-row>
        <el-col :span="1"><div class="grid-content left-title "></div></el-col>
        <el-col :span="23"><div class="grid-content bg-purple-light">开设专业</div></el-col>
        </el-row>   
        

         <el-row style="margin-top:30px;margin-bottom:20px">
        <el-col :span="1"><div class="grid-content left-title "></div></el-col>
        <el-col :span="23"><div class="grid-content bg-purple-light">院校风采</div></el-col>
        </el-row>   

         <img style="width:30%;margin-left:30px;border-radius: 5px;" v-for="(image, index) in JSON.parse(university.images)" :key="index" :src="image">
    </el-footer>
  </div>
</template>

<script>
import{getUniversityDetail,getAdmissionPlan}from "@/api/university"
export default {
 data() {
      return {
        years: [{
          value: '2023',
          label: '2023'
        }, {
          value: '2022',
          label: '2022'
        }, {
          value: '2021',
          label: '2021'
        }],
        examType:[{
          value: '1',
          label: '理科'
        }, {
          value: '2',
          label: '文科'
        }],
        year:'2023',//当前选中的年份  默认是2023
        type:'1',
        admissionPlan:[],
        university:{}
      }
 },
 methods:{
  //招生计划模块中年份发生变化
  handleYearChange(year){
    this.year=year;
    this.getAdmissionPlan()
  },
  handleTypeChange(type){
    this.type=type
    this.getAdmissionPlan()
  }
  ,

  getAdmissionPlan(){
  const params={"id":this.$route.query.id,"year":this.year,"type":this.type}
  getAdmissionPlan(params).then(res=>{
    if(res.data.code===1){
      this.admissionPlan=res.data.data
    }
  })
  }
  
 }
 ,
 created(){
  //院校详情
  getUniversityDetail(this.$route.query.id).then(res=>{
  if(res.data.code===1){
  this.university=res.data.data


}})
//获取招生计划
  this.getAdmissionPlan();


  
 }

}
</script>

<style scoped>
.el-aside {
  color: #333;
  text-align: center;
}
.el-main {
font-size: 17px;
  color: white;
  line-height: 40px;
}
.el-footer {
    background-color: #B3C0D1;
    margin-top:20px;
    color: #333;
    line-height: 60px;
  }

.schooltags{
margin-right: 15px;
border-radius: 15px;
border: 1px solid #fff;
padding: 3px 15px 2px;    
height: 70px;
}
.left-title {
background: red;
width: 5px;
  }
  .bg-purple-light {
    background: #e5e9f2;
    margin-left: -35px;
    font-size: 20px;
     font-weight: bold;

  }
  .grid-content {
    height: 40px;
  }
    .bg-purple {
    padding-top: 10px;

    height: 200px;
    line-height: 35px;
    font-size: 25px;
 
  }


  /* 院校基本信息卡片 */
  .basic-info-card{
  text-align:center;
  width:80%;
  margin-left:30px;
  border-radius:30px;
  color: #1a0f7e;
  }
</style>